<template>
	<view>

		<view v-for="(item,index) in shuju" :key="index">
			<rich-text :nodes="item.content"></rich-text>
			<view class="lunbo">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<image src="../../static/static/images/demo01/t2.jpg" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/static/images/demo01/t3.jpg" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="">
				原价:{{item.market_price}}
			</view>
			<view class="">
				<s>折扣:{{item.sell_price}}</s>
			</view>
			<view class="">
				{{item.title}}
			</view>
			<view class="kucun">
				<view class="">
					库存:{{item.stock_quantity}}
				</view>
				<view class="">
					货号:{{item.goods_no}}
				</view>
			</view>

		</view>
		<view v-for="(item,index) in XQ" :key="index">
			<view class="jieshao">
				详情介绍
			</view>
			<view class="content">
				<rich-text :nodes="item.content"></rich-text>
			</view>
		</view>
		<view>
			<view class="guding">
				<!-- 客服店铺购物车加入购物车立即购买 -->
				<text>客服</text>
				<text>店铺</text>
				<text>购物车</text>
				<view class="anniu">
					<text>加入购物</text>
					<text @click="tiaozhuan">立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: -1,
				shuju: [],
				XQ: []
			}
		},
		onLoad(e) {
			console.log(e)
			this.id = e.id
			this.getshuju()
			this.xiangqing()
		},
		methods: {
			async getshuju() {
				// goods/getinfo/:id
				const data = await uni.$Http.get(`goods/getinfo/${this.id}`)
				// console.log(data)
				this.shuju = data.message
			},
			async xiangqing() {
				// /api/goods/getdesc/:id
				const data = await uni.$Http.get(`goods/getdesc/${this.id}`)
				this.XQ = data.message
				console.log(data)
			},
			tiaozhuan(){
				uni.navigateTo({
					url:'../tiaozhuanmai/tiaozhuanmai'
				})
			}
		}
	}
</script>

<style>
	.jieshao {
		font-weight: bold;
		height: 50rpx;
		width: 100%;
		background-color: pink;
	}

	.kucun {
		height: 100rpx;
		line-height: 50rpx;
		width: 100%;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: pink;
	}

	.lunbo{
		height: 400px;
		width: 100%;
	}
	.swiper {
		width: 100%;
		height: 400px;
	}

	swiper-item image {
		width: 100%;
		height:400px;
	}

	.guding {
		width: 100%;
		height: 100rpx;
		border: 1px solid #733A36;
		background-color: pink;
		position: fixed;
		display: flex;
		bottom: 0px;
	}

	.guding text {
		display: block;
		color: #666666;
		/* margin-top: 15rpx; */
		width: 125rpx;
		line-height: 113rpx;
		height: 80rpx;
		text-align: center;
	}
	
	.anniu{
		display: flex;
	}

	.anniu text:nth-of-type(1) {
		width: 180rpx;
		height: 100rpx;
		background-color: #FF0000;
		color: #FFFFFF;
		line-height: 99rpx;
		border-radius: 48px 0px 0px 46px;
	}

	.anniu text:nth-of-type(2) {
		width: 180rpx;
		height: 100rpx;
		line-height: 94rpx;
		background-color: #FFA200;
		color: #FFFFFF;
		border-radius: 0px 28px 32px 0px;
	}
</style>
